<template>
  <el-main>
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/homepage/customer'}">客户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{keykey}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="id">客户编号</el-dropdown-item>
              <el-dropdown-item command="name">客户姓名</el-dropdown-item>
              <el-dropdown-item command="identity">身份证号</el-dropdown-item>
              <el-dropdown-item command="age">客户年龄</el-dropdown-item>
              <el-dropdown-item command="address">客户地址</el-dropdown-item>
              <el-dropdown-item command="phone">联系电话</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <!-- 选择区域 -->
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="value"
                    class="input-with-select" clearable="" @clear="findlist(key,value)">
            <el-button slot="append" icon="el-icon-search" @click="findlist(key,value)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addCustomerVisible=true">添加客户</el-button>

        </el-col>


      </el-row>


      <el-table :data="searchlist" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="客户编号" prop="id"></el-table-column>
        <el-table-column label="客户姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="identity"></el-table-column>
        <el-table-column label="客户年龄" prop="age"></el-table-column>
        <el-table-column label="客户地址" prop="address"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="操作" fixed="right" width="250px">
          <!-- slot-scope用来获取当前表格的数据对象
               用scope.row可以获取当前列的数据 -->
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="changeFormBind(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteForm(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码显示 -->
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

    </el-card>
    <!-- 添加信息区域 -->
    <el-dialog
      title="添加客户信息"
      :visible.sync="addCustomerVisible"
      width="30%" @close="addCustomerClosed">
      <!-- 主体区域 -->
      <el-form :model="addCustomer" :rules="addCustomerRules" ref="addCustomerRef" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="addCustomer.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="identity">
          <el-input v-model="addCustomer.identity"></el-input>
        </el-form-item>
        <el-form-item label="客户年龄" prop="age">
          <el-input v-model="addCustomer.age"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="address">
          <el-input v-model="addCustomer.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="addCustomer.phone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addCustomerVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 修改信息区域 -->
    <el-dialog
      title="修改客户信息"
      :visible.sync="changeCustomerVisible"
      width="30%">
      <!-- 主体区域 -->
      <el-form :model="changeCustomer" :rules="addCustomerRules" ref="changeCustomerRef" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="客户编号" prop="id">
          <el-input v-model="changeCustomer.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="changeCustomer.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="identity">
          <el-input v-model="changeCustomer.identity"></el-input>
        </el-form-item>
        <el-form-item label="客户年龄" prop="age">
          <el-input v-model="changeCustomer.age"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="address">
          <el-input v-model="changeCustomer.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="changeCustomer.phone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="changeCustomerVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeForm">确 定</el-button>
  </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: 'customer',
  data() {
    //数字合法验证
    var checkNumber = (rule, value, callback) => {
      const regNumber = /^(0|[1-9]\d*)$/
      //验证成功
      if (regNumber.test(value)) {
        return callback();
      } else {
        callback(new Error('请输入合法的数字'));
      }
    }
    return {
      customerlist: [],
      searchlist: [],
      keykey: '选择',
      key: '',//搜索类别
      value: '',//搜索值
      total: 0,
      alltotal: 0,
      addCustomerVisible: false,  //添加搜索框的隐藏和显示
      changeCustomerVisible: false,
      addCustomer: {      //添加部门数据
        name:'',
        identity:'',
        age:'',
        address:'',
        phone:''
      },
      changeCustomer: {
        id: 0,
        name:'',
        identity:'',
        age:'',
        address:'',
        phone:''
      },

      addCustomerRules: {  //添加表单验证规则
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        identity: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的身份证号', trigger: 'blur'
          }
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {validator: checkNumber, trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          { validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的联系方式"));
              } else { callback(); }
            },
            trigger: "blur"
          }
        ]
      },
    }
  },
  created() {
    this.getList();
    this.$message.success("获取成功");
  },
  methods: {
    getList: function () {
      this.$axios.get('/api/customer/list').then(res => {
        console.log(res.data);
        this.customerlist = res.data;
        this.searchlist = res.data;
        this.alltotal = res.data.length;
        this.total = res.data.length;

      }).catch(err => {
        console.log(err);
      })
    },
    findlist: function (key, value) {
      if (value == '') {
        this.searchlist = this.customerlist;
        this.total = this.alltotal;
        this.keykey = '选择';
      } else {
        this.$axios.get('/api/customer/search', {
          params: {
            key: key,
            value: value
          }
        }).then(res => {
          this.searchlist = res.data;
          this.total = res.data.length;

          console.log(res.data);
        }).catch(err => {
          console.log(err);
        })
      }
    },
    addForm: function () {
      this.$refs.addCustomerRef.validate(valid => {
        console.log(valid);
        if (!valid) return;

        let addCustomer = this.addCustomer;
        this.$axios.get('/api/customer/repeat', {
          params: {
            name: addCustomer.name
          }
        }).then(res => {
          if (res.data == false) {
            this.$axios.post('/api/customer/save', addCustomer
            ).then(res => {
              console.log(res);
              this.$message.success('添加客户成功');
              this.addCustomerVisible = false;
              this.getList();
            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.error('该客户已经被添加');
          }
        }).catch(err => {
          console.log(err);
        })


      })

    },
    //删除列表
    deleteForm: function (res) {
      console.log(res);
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/api/customer/delete', {
          params: {
            id: res
          }
        }).then(res => {
          this.$message.success('删除客户成功');
          this.getList();
          console.log(res);
        }).catch(err => {
          console.log(err);
        })
      })
    },
    changeForm: function () {
      this.$refs.changeCustomerRef.validate(valid => {
        console.log(valid);
        if (!valid) return;
        let changeCustomer = this.changeCustomer;
        this.$axios.get('/api/customer/changeRepeat', {
          params: {
            id: changeCustomer.id,
            name: changeCustomer.name
          }
        }).then(res => {
          if (res.data == false) {
            this.$axios.post('/api/customer/update', changeCustomer
            ).then(res => {
              console.log(res);
              this.$message.success('修改客户信息成功');
              this.changeCustomerVisible = false;
              this.getList();
            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.error('该客户已经被添加');
          }
        }).catch(err => {
          console.log(err);
        })
      })
    },
    changeFormBind: function (res) {
      this.changeCustomer = res;
      console.log(this.changeCustomer);
      this.changeCustomerVisible = true;
      this.getList();

    },

    handleCommand: function (command) {
      this.key = command;
      switch (command) {
        case 'id':
          this.keykey = '客户编号';
          break;
        case 'name':
          this.keykey = '客户姓名';
          break;
        case 'identity':
          this.keykey = '身份证号';
          break;
        case 'age':
          this.keykey = '客户年龄';
          break;
        case 'address':
          this.keykey = '客户地址';
          break;
        case 'phone':
          this.keykey = '联系电话';
          break;
      }

    },
    //关闭对话框重置信息
    addCustomerClosed: function () {
      this.$refs.addCustomerRef.resetFields();

    },
  }


}

</script>

<style lang="less">
.el-aside {
  color: #333;
  height: 600px;
}

.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-table {
  margin-top: 15px; //表格与搜索框边距
  font-size: 15px;
}

.el-pagination {
  margin-top: 15px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;


}

.el-icon-arrow-down {
  font-size: 12px;
  margin-top: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

